<template>
  <div style="height: 90vh">
    <el-alert title="查询信息" type="info" :closable="false"></el-alert>
    <el-form inline :model="form">
      <el-form-item label="采集设备名称">
        <el-input
          v-model="form.sensorName"
          placeholder="请输入采集设备名称"
          size="medium"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="采集主题">
        <el-select
          v-model="form.moduleEnum"
          size="medium"
          clearable
          placeholder="请选择采集主题"
        >
          <el-option label="渗压" value="01"></el-option>
          <el-option label="渗流" value="02"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="info" size="medium" @click="search(1)">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" size="medium" @click="addDevice = true"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <el-alert title="采集设备信息列表" type="info" :closable="false"></el-alert>
    <el-table
      :data="tableData"
      stripe
      :cell-style="{ padding: '0' }"
      style="height: 62vh; overflow-y: auto; margin-bottom: 1.2rem"
    >
      <el-table-column
        label="设备名称"
        prop="sensorName"
        align="center"
      ></el-table-column>
      <el-table-column label="采集主题" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.moduleEnum == '00'">北斗监测</span>
          <!-- <span v-if="scope.row.moduleEnum == '01'">岩土监测</span> -->
          <span v-if="scope.row.moduleEnum == '02'">气象监测</span>
        </template>
      </el-table-column>
      <el-table-column
        label="监测体"
        prop="monitorName"
        align="center"
      ></el-table-column>
      <el-table-column label="设备生产商" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.productEnum == '00'">天宝</span>
          <span v-if="scope.row.productEnum == '01'">司南</span>
          <span v-if="scope.row.productEnum == '02'">基康</span>
          <span v-if="scope.row.productEnum == '03'">阳光</span>
          <span v-if="scope.row.productEnum == '05'">易周</span>
        </template>
      </el-table-column>
      <el-table-column
        label="设备IP"
        prop="monitorIp"
        align="center"
      ></el-table-column>
      <el-table-column label="采集协议" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.monitorProtocol == '00'">TCP</span>
          <span v-if="scope.row.monitorProtocol == '01'">NTRIP</span>
        </template>
      </el-table-column>
      <el-table-column
        label="服务端口"
        prop="monitorPort"
        align="center"
      ></el-table-column>
      <el-table-column
        label="基准站"
        prop="baseName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="登录名"
        prop="loginName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="密码"
        prop="password"
        align="center"
      ></el-table-column>
      <el-table-column
        label="采集频率"
        prop="reportIntervalTime"
        align="center"
      ></el-table-column>
      <el-table-column
        label="经度"
        prop="xoriginal"
        align="center"
      ></el-table-column>
      <el-table-column
        label="纬度"
        prop="yoriginal"
        align="center"
      ></el-table-column>
      <el-table-column label="是否鉴权" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.whetherAuthentication == '01'">是</span>
          <span v-if="scope.row.whetherAuthentication == '02'">否</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
      ></el-table-column>
      <el-table-column label="站点状态" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div
            v-if="
              scope.row.moduleEnum == '01' ||
              (scope.row.moduleEnum == '02' && scope.row.productEnum == '05')
            "
          >
            <el-link type="primary" :underline="false">修改</el-link>&nbsp;
            <el-link type="primary" :underline="false">通道详情</el-link>&nbsp;
            <el-link type="primary" :underline="false">删除</el-link>
          </div>
          <div v-else>
            <el-link type="primary" :underline="false">修改</el-link>&nbsp;
            <el-link type="primary" :underline="false">删除</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-pagination
        background
        :current-page="pageData.currentPage"
        layout="total, prev, pager, next, jumper"
        :total="pageData.count"
        :page-size="pageData.pageSize"
        @current-change="handleCurrentChange"
        v-if="pageData.count && pageData.count != 0"
      >
      </el-pagination>
    </el-row>
    <el-dialog
      title="增加采集设备"
      :visible.sync="addDevice"
      :before-close="closeDialog"
      width="40%"
    >
      <el-form
        :model="addForm"
        ref="addForm"
        :rules="rules"
        label-position="left"
        label-width="90px"
        inline
      >
        <el-form-item label="采集主题" prop="collectTopic">
          <el-select
            placeholder="请选择采集主题"
            v-model="addForm.collectTopic"
            @change="cjztChange"
          >
            <el-option label="北斗" value="00"></el-option>
            <el-option label="气象" value="02"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="站点名称" prop="sensorName">
          <el-input
            placeholder="请输入站点名称"
            v-model="addForm.sensorName"
          ></el-input>
        </el-form-item>
        <br />
        <el-form-item label="区站号" prop="sensorNumber1" v-if="isqzh6">
          <el-input
            placeholder="请输入6位区站号"
            v-model="addForm.sensorNumber1"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="区站号" prop="sensorNumber4" v-if="isqzh2">
          <el-input
            placeholder="请输入2位区站号"
            v-model="addForm.sensorNumber4"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="设备标识号" prop="sensorNumber2" v-if="issbbsh">
          <el-input
            placeholder="请输入4位设备标识号"
            v-model="addForm.sensorNumber2"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备ID" prop="sensorNumber3" v-if="issbid">
          <el-input
            placeholder="请输入3位设备ID"
            v-model="addForm.sensorNumber3"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备生产商" prop="productEnum">
          <el-select
            placeholder="请选择生产商"
            v-model="addForm.productEnum"
            @change="sbscsChange"
          >
            <el-option label="天宝" value="00"></el-option>
            <el-option label="司南" value="01"></el-option>
            <el-option label="基康" value="02"></el-option>
            <el-option label="阳光" value="03"></el-option>
            <el-option label="易周" value="05"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采集频率" prop="reportIntervalTime" v-if="iscjpl">
          <el-input
            placeholder="请输入采集频率单位：分钟"
            v-model="addForm.reportIntervalTime"
          ></el-input>
        </el-form-item>

        <el-form-item label="服务端口" prop="monitorPort" v-if="isfwgk">
          <el-input
            placeholder="请输入服务端口号"
            v-model="addForm.monitorPort"
          ></el-input>
        </el-form-item>
        <el-form-item label="监测体" prop="monitorId">
          <el-select placeholder="请选择监测体" v-model="addForm.monitorId">
            <el-option
              v-for="item in monitorList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通道数量" prop="tunnelCount" v-if="istdsl">
          <el-input
            placeholder="请输入通道数量"
            v-model="addForm.tunnelCount"
            style="width: 118px"
          ></el-input>
          <el-button type="primary">生成通道</el-button>
        </el-form-item>
        <el-form-item label="基准站" prop="baseId" v-if="isjzz">
          <el-select placeholder="请选择基准站" v-model="addForm.baseId">
            <el-option
              v-for="item in baseList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采集协议" prop="monitorProtocol">
          <el-select
            placeholder="请选择采集协议"
            v-model="addForm.monitorProtocol"
            :disabled="isDisabled"
            @change="cjxyChange"
          >
            <el-option label="TCP" value="00"></el-option>
            <el-option label="NTRIP" value="01"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="是否鉴权"
          prop="whetherAuthentication"
          v-if="issfjq"
        >
          <el-select
            placeholder="请选择"
            v-model="addForm.whetherAuthentication"
            :disabled="isDisabled"
            @change="sfjqChange"
          >
            <el-option label="是" value="01"></el-option>
            <el-option label="否" value="02"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登录名" prop="loginName" v-if="isdlm">
          <el-input
            placeholder="请输入登录名"
            v-model="addForm.loginName"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="ismm">
          <el-input
            placeholder="请输入密码"
            v-model="addForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备IP" prop="monitorIp" v-if="issbip">
          <el-input
            placeholder="请输入设备IP"
            v-model="addForm.monitorIp"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <p class="pStyle">南京中网卫星通信股份有限公司</p>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "DeviceCollection",
  data() {
    return {
      form: {
        sensorName: "",
        moduleEnum: "",
      },
      tableData: null,
      pageData: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      addDevice: false,
      addForm: {
        collectTopic: "", //采集主题
        monitorId: null, //监测体
        sensorName: "", //站点名称
        monitorProtocol: null, //采集协议
        whetherAuthentication: null, //鉴权
        baseId: null, //基准站
        loginName: "", //登录名
        productEnum: "", //设备生产商
        monitorPort: "", //服务端口
        password: "", //密码
        monitorIp: null, //设备IP
        sensorNumber1: null, //区站号6
        sensorNumber2: null, //设备标识号
        sensorNumber3: null, //设备ID
        sensorNumber4: null, //区站号2
        tunnelCount: null, //通道数量
        reportIntervalTime: null, //采集频率
      },
      rules: {
        collectTopic: [{ message: "请选择采集主题", trigger: "change" }],
        sensorName: [{ message: "请输入站点名称", trigger: "blur" }],
        monitorId: [{ message: "请选择监测体", trigger: "change" }],
        monitorProtocol: [{ message: "请选择采集协议", trigger: "change" }],
        whetherAuthentication: [
          { message: "请选择是否鉴权", trigger: "change" },
        ],

        productEnum: [{ message: "请选择生产商", trigger: "change" }],
        monitorPort: [
          {
            pattern: /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/,
            message: "端口号：0-65535",
            trigger: "blur",
          },
          {
            message: "请输入服务端口号",
            trigger: "blur",
          },
        ],
        loginName: [{ message: "请输入登录名", trigger: "blur" }],
        password: [
          {
            pattern: /^\w{6,20}$/,
            message: "密码必须是(6-20)位字母、数字和下划线组合(不含空格)",
            trigger: "blur",
          },
        ],
        monitorIp: [
          {
            pattern:
              /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/,
            message: "格式：255.255.255.1",
            trigger: "blur",
          },
        ],
        baseId: [{ message: "请选择基准站", trigger: "change" }],
        sensorNumber1: [
          {
            pattern: /^[a-zA-Z0-9]{6}$/,
            message: "格式：6位英文，数字，及其组合",
            trigger: "blur",
          },
        ],
        sensorNumber4: [
          {
            pattern: /^[a-zA-Z0-9]{2}$/,
            message: "格式：2位英文，数字，及其组合",
            trigger: "blur",
          },
        ],
        sensorNumber2: [
          {
            pattern: /^[a-zA-Z0-9]{4}$/,
            message: "格式：4位英文，数字，及其组合",
            trigger: "blur",
          },
        ],
        sensorNumber3: [
          {
            pattern: /^[a-zA-Z0-9]{3}$/,
            message: "格式：3位英文，数字，及其组合",
            trigger: "blur",
          },
        ],
        reportIntervalTime: [
          {
            message: "请输入采集频率单位：分钟",
            trigger: "blur",
          },
        ],
        tunnelCount: [{ message: "请输入通道数量", trigger: "blur" }],
      },
      baseList: [],
      monitorList: [],
      isDisabled: false, //选择框禁用
      isjzz: false, //基准站
      isfwgk: false, //服务端口
      issfjq: false, //鉴权
      issbid: false, //设备ID
      isdlm: false, //登录名
      ismm: false, //密码
      issbip: false, //设备IP
      isqzh6: false, // 区站号6位
      isqzh2: false, // 区站号2位
      issbbsh: false, // 设备标识号
      istdsl: false, // 通道数量
      iscjpl: false, // 采集频率
    };
  },
  created() {
    let queryData = {
      currentPage: "1",
      sensorName: "",
      moduleEnum: "",
    };
    this.deviceCollection(queryData);
    this.getMonitorList();
    this.getBaseList();
  },
  methods: {
    // 表单验证
    checkMonitorPort(rule, value, callback) {
      console.log(value);
    },
    deviceCollection(queryData) {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":${queryData.currentPage},\\"pageSize\\":10},\\"sensorName\\":\\"${queryData.sensorName}\\",\\"moduleEnum\\":\\"${queryData.moduleEnum}\\"}","serviceCode":"listSensorInfoByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        if (res.data.parameter.list != "") {
          this.pageData = res.data.parameter.page;
          let list = res.data.parameter.list;
          this.tableData = list;
          // this.$message({
          //   message: "查询成功",
          //   type: "success",
          //   duration: 1000,
          //   offset: 450,
          // });
        }
        if (res.data.parameter.list == "") {
          this.pageData = 0;
          let list = res.data.parameter.list;
          this.tableData = list;
          this.$message({
            message: "暂无数据",
            duration: 1000,
            offset: 450,
          });
        }
      });
    },
    // 监测体列表
    getMonitorList() {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"type\\":\\"2\\"}","serviceCode":"querySelect","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.monitorList = res.data.parameter.list;
      });
    },
    // 基准站列表
    getBaseList() {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"type\\":\\"7\\"}","serviceCode":"querySelect","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.baseList = res.data.parameter.list;
      });
    },
    search(currentPage) {
      let queryData = {
        currentPage: currentPage,
        sensorName: this.form.sensorName,
        moduleEnum: this.form.moduleEnum,
      };
      this.deviceCollection(queryData);
    },

    handleCurrentChange(val) {
      this.search(val);
    },
    add() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let queryData = {
            collectTopic: this.addForm.collectTopic, //采集主题
            monitorId: this.addForm.monitorId, //监测体
            sensorName: this.addForm.sensorName, //站点名称
            monitorProtocol: this.addForm.monitorProtocol, //采集协议
            whetherAuthentication: this.addForm.whetherAuthentication, //鉴权
            baseId: this.addForm.baseId, //基准站
            loginName: this.addForm.loginName, //登录名
            productEnum: this.addForm.productEnum, //设备生产商
            monitorPort: this.addForm.monitorPort, //服务端口
            password: this.addForm.password, //密码
            monitorIp: this.addForm.monitorIp, //设备IP
            sensorNumber1: this.addForm.sensorNumber1, //区站号6
            sensorNumber2: this.addForm.sensorNumber2, //设备标识号
            sensorNumber3: this.addForm.sensorNumber3, //设备ID
            sensorNumber4: this.addForm.sensorNumber4, //区站号2
            tunnelCount: this.addForm.tunnelCount, //通道数量
            reportIntervalTime: this.addForm.reportIntervalTime, //采集频率
          };
          const formData = new FormData();
          for (const [key, value] of Object.entries(queryData)) {
            formData.append(key, value);
          }
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"collectTopic\\":\\"${queryData.collectTopic}\\",\\"monitorId\\":\\"${queryData.monitorId}\\",\\"sensorName\\":\\"${queryData.sensorName}\\",\\"monitorProtocol\\":\\"${queryData.monitorProtocol}\\",\\"whetherAuthentication\\":\\"${queryData.whetherAuthentication}\\",\\"userPassword\\":\\"${queryData.baseId}\\",\\"loginName\\":\\"${queryData.loginName}\\",\\"productEnum\\":\\"${queryData.productEnum}\\",\\"monitorPort\\":\\"${queryData.monitorPort}\\",\\"password\\":\\"${queryData.password}\\",\\"monitorIp\\":\\"${queryData.monitorIp}\\",\\"sensorNumber1\\":\\"${queryData.sensorNumber1}\\",\\"sensorNumber2\\":\\"${queryData.sensorNumber2}\\",\\"sensorNumber3\\":\\"${queryData.sensorNumber3}\\",\\"sensorNumber4\\":\\"${queryData.sensorNumber4}\\",\\"tunnelCount\\":\\"${queryData.tunnelCount}\\",\\"reportIntervalTime\\":\\"${queryData.reportIntervalTime}\\",}","serviceCode":"addSensorInfo","timestamp":"","uuid":""}`,
          }).then((res) => {
            if (res.data.resultCode == "200") {
              this.$message.success({
                message: "新增成功",
                offset: 400,
                duration: 1000,
              });
              this.getWaringSearchPage();
            } else if (res.data.resultCode == "400") {
              this.$message.error({
                message: "新增失败",
                offset: 400,
                duration: 1000,
              });
            }
            this.addDevice = false;
          });
        } else {
          this.$message({
            type: "error",
            message: "请完善表单信息",
            offset: 400,
            duration: 1000,
          });
        }
      });
    },
    closeDialog() {
      this.isDisabled = false;
      this.isjzz = false;
      this.isfwgk = false;
      this.issfjq = false;
      this.issbid = false;
      this.isdlm = false;
      this.ismm = false;
      this.issbip = false;
      this.isqzh6 = false;
      this.isqzh2 = false;
      this.issbbsh = false;
      this.istdsl = false;
      this.iscjpl = false;
      this.$refs.addForm.resetFields();
      this.addDevice = false;
    },
    // 采集主题
    cjztChange(selectValue) {
      if (selectValue == "00") {
        this.isDisabled = false;
        this.isjzz = true;
        this.isfwgk = true;
        this.issfjq = true;
        this.issbid = false;
        this.isdlm = false;
        this.ismm = false;
        this.issbip = false;
        this.isqzh6 = false;
        this.isqzh2 = false;
        this.issbbsh = false;
        this.istdsl = false;
        this.iscjpl = false;
      } else if (selectValue == "02") {
        this.isfwgk = false;
        this.isjzz = false;
        this.addForm.monitorProtocol = "00";
        this.addForm.whetherAuthentication = "01";
        this.issfjq = true;
        this.isDisabled = true;
        this.isdlm = true;
        this.ismm = true;
        this.issbip = true;
      }
    },
    // 设备生产商
    sbscsChange(selectValue) {
      if (selectValue == "03") {
        this.isqzh6 = true;
        this.isqzh2 = false;
        this.issbbsh = true;
        this.issbid = true;
        this.isDisabled = true;
        this.addForm.monitorProtocol = "00";
        this.addForm.whetherAuthentication = "01";
        this.issfjq = true;
        this.isdlm = true;
        this.ismm = true;
        this.issbip = true;
        this.istdsl = false;
        this.iscjpl = false;
      } else if (selectValue == "05") {
        this.isqzh2 = true;
        this.isqzh6 = false;
        this.issbbsh = false;
        this.issbid = false;
        this.iscjpl = true;
        this.istdsl = true;
        this.isDisabled = true;
        this.addForm.monitorProtocol = "00";
        this.addForm.whetherAuthentication = "01";
        this.issfjq = true;
        this.isdlm = true;
        this.ismm = true;
        this.issbip = true;
      }
    },
    // 采集协议
    cjxyChange(selectValue) {
      if (selectValue == "00") {
        this.issfjq = true;
        this.isDisabled = false;
      } else if (selectValue == "01") {
        this.addForm.whetherAuthentication = "01";
        this.issfjq = true;
        this.isDisabled = true;
        this.isdlm = true;
        this.ismm = true;
        this.issbip = true;
      }
    },
    // 是否鉴权
    sfjqChange(selectValue) {
      if (selectValue == "01") {
        this.isdlm = true;
        this.ismm = true;
        this.issbip = true;
      } else if (selectValue == "02") {
        this.isdlm = false;
        this.ismm = false;
        this.issbip = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.pStyle {
  position: absolute;
  bottom: 1%;
  right: 2%;
}
.el-alert {
  line-height: 1.5rem;
  margin-top: 1rem;
  /deep/ .el-alert__title {
    font-size: 1rem;
  }
}
.el-form {
  margin: 1rem 0;
  margin-left: 1.5rem;
}
.el-input {
  width: 10rem;
}
// /deep/ .el-form--inline {
//   .el-form-item {
//     margin-bottom: 0;
//   }
// }
</style>